<template>
  <section>
    <!-- 评价页 -->
    <!-- {{sellers}} -->
    <!-- 评分部分 -->
    <div class="grade">
      <!-- 左边盒子 -->
      <div class="left">
        <p>{{sellers.score}}评分</p>
        <p>综合评分</p>
        <p>高于周边</p>
      </div>
      <!-- 右边盒子 -->
      <div class="right">
        <p>
          <span>服务态度</span>
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/c.png" alt />
          <span style="margin-left: 0.24rem;font-size:0.2rem;color:#ff9900;">{{sellers.foodScore}}</span>
        </p>
        <p>
          <span>服务态度</span>
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/c.png" alt />
          <span style="margin-left: 0.24rem;font-size:0.2rem;color:#ff9900;">{{sellers.serviceScore}}</span>
        </p>
        <p>
          <span>送达时间</span>
          <span style="font-size:0.2rem;color:#93999f;">{{sellers.deliveryTime}}分钟</span>
        </p>
      </div>
    </div>
    <!-- 评价部分 -->
    <div class="ratings">
      <div class="r_top">
        <ul>
          <li>全部57</li>
          <li>满意47</li>
          <li>不满意10</li>
        </ul>
      </div>
      <div class="r_bottom">
        <van-icon name="passed" />
        <span>只看有内容的评价</span>
      </div>
    </div>
    <!-- 评价的内容 -->
    <div class="r_content">
      <div class="box" v-for="(item,key) in ratings" :key="key">
        <aside>
          <img src="@/assets/tu.jpg" alt />
        </aside>
        <ul class="content">
          <li>{{item.username}}</li>
          <li>
            <img src="@/assets/xx.png" alt />
            <img src="@/assets/xx.png" alt />
            <img src="@/assets/xx.png" alt />
            <img src="@/assets/xx.png" alt />
            <img src="@/assets/c.png" alt />
            <span>{{item.deliveryTime}}分钟送达</span>
          </li>
          <li>{{item.text}}</li>
          <li>
            <van-icon name="thumb-circle-o" />
            <!-- <span>{{ratings[0].recommend}}</span> -->
            <span>没写</span>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      ratings: [],
      // 评分对象
      sellers: {}
    };
  },
  async mounted() {
    let { data: res } = await this.$http.get("/mock/data.json");
    console.log(res);
    this.ratings = res.ratings;
    this.sellers = res.seller;
  }
};
</script>

<style lang="scss" scoped>
section {
  height: 100%;
  overflow: auto;
  background: #f3f5f7;
  .grade {
    display: flex;
    height: 2.12rem;
    background: #ffffff;
    border-top: solid 2px #e6e7e8;
    border-bottom: solid 2px #e6e7e8;
    .left {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 2.75rem;
      border-right: solid 1px #e6e7e8;
      height: 100%;
      p:nth-child(1) {
        font-size: 0.48rem;
        color: #ff9900;
      }
      p:nth-child(2) {
        font-size: 0.24rem;
        color: #07111b;
        margin-bottom: 0.17rem;
      }
      p:nth-child(3) {
        font-size: 0.2rem;
        color: #93999f;
      }
    }
    img {
      width: 0.29rem;
      height: 0.29rem;
    }
    .right {
      p:nth-child(1),
      p:nth-child(2),
      p:nth-child(3) {
        display: flex;
        span:nth-child(1) {
          font-size: 0.24rem;
          margin: 0 0.24rem 0.16rem 0.48rem;
        }
        span:nth-child(3) {
          margin-left: 0.24rem;
        }
      }
      p:nth-child(1) {
        margin-top: 0.4rem;
      }
    }
  }
  // 评价
  .ratings {
    margin-top: 0.32rem;
    height: 2.22rem;
    background: #ffffff;
    border-bottom: #e6e7e8 2px solid;
    .r_top {
      border-bottom: #e6e7e8 1px solid;
      margin: 0 0.36rem;
      height: 1.34rem;
      ul {
        display: flex;
        height: 100%;
        li {
          width: 1.2rem;
          height: 0.64rem;
          line-height: 0.64rem;
          text-align: center;
          margin: 0.36rem 0.16rem 0.36rem 0;
          font-size: 0.23rem;
        }
        li:nth-child(1) {
          background: #00a0dc;
        }
        li:nth-child(2) {
          background: #ccecf8;
        }
        li:nth-child(3) {
          background: #e9ebec;
        }
      }
    }
    .r_bottom {
      height: 0.97rem;
      display: flex;
      align-items: center;
      .van-icon {
        font-size: 0.4rem;
        color: #b7bbbf;
        margin: 0 0.12rem 0 0.4rem;
      }
      span {
        font-size: 0.22rem;
        color: #93999f;
      }
    }
  }
  // 评价的内容
  .r_content {
    overflow-y: auto;
    background: #ffffff;
    .box {
      height: 2.6rem;
      border-bottom: solid 2px #e6e7e8;
      display: flex;
      margin: 0.36rem;
      aside {
        width: 20%;
        img {
          width: 0.56rem;
          height: 0.56rem;
          border-radius: 50%;
          margin: 0.36rem 0.24rem 0.12rem 0.36rem;
        }
      }
      .content {
        width: 80%;
        li {
          display: flex;
          img {
            width: 0.2rem;
            height: 0.19rem;
          }
        }
        li:nth-child(1) {
          font-size: 0.2rem;
          margin: 0.38rem 0 0.13rem 0;
        }
        li:nth-child(2) {
          span {
            margin-left: 0.12rem;
            font-size: 0.2rem;
            font-weight: 200;
            color: #93999f;
          }
        }
        li:nth-child(3) {
          font-size: 0.24rem;
          color: #07111b;
          line-height: 0.41rem;
        }
      }
      li:nth-child(4) {
        display: flex;
        margin-top: 0.16rem;
        .van-icon {
          font-size: 0.24rem;
          color: #00a0dc;
          margin-right: 0.16rem;
        }
        span {
          border: solid 1px #cccccc;
          font-size: 0.17rem;
          color: #93999f;
          width: 1.24rem;
          height: 0.3rem;
          display: inline-block;
          text-align: center;
        }
      }
    }
  }
}
</style>